<template>
	<view>
		<!-- flex-flow: row-reverse; -->
		<view :class="['top-box','u-flex','u-font-24', 'u-row-center', form.transferType == 1 ? '': 'u-row-reverse']">
			<view class="card-box">
				<image class="img-card" src="@/static/my/card.png" mode=""></image>
				<view class="u-flex">
					<view class="hui">{{form.transferType == 1 ? '从' : '到'}}</view>
					<view class="">商家账户</view>
				</view>
			</view>
			<image style="width: 64rpx;height:64rpx; margin: 0 30rpx;" src="@/static/my/arrow.png" mode="" @click="changeDirection"></image>
			<view class="card-box">
				<image class="img-card" src="@/static/my/person.png" mode=""></image>
				<view class="u-flex">
					<view class="hui">{{form.transferType == 2 ? '从' : '到'}}</view>
					<view class="">个人账户</view>
				</view>
			</view>
		</view>
		
		<u-form :model="form" ref='uForm' :border="false" class="from-content">
			<view class="u-flex  u-row-between form-item">
				<view class="label">
					账户糖果余额(颗)                                        
				</view>
				<view class="u-flex-1">
					<u-input v-model="count"  disabled input-align="right"/>
				</view>
			</view>
			<view class="u-flex  u-row-between form-item" prop="sweet">
				<view class="label">
					划转数量
				</view>
				<view class="u-flex-1 u-flex number-input">
					<!-- <u-icon name="minus"></u-icon> -->
					<!-- :custom-style="customStyle"  -->
					<u-input v-model="form.sweet" type="number" placeholder="请输入划转糖果数量" input-align="right"/>
					<!-- <u-icon name="plus"></u-icon> -->
				</view>
			</view>
			<view class="u-flex  u-row-between form-item">
				<view class="label">
					交易密码
				</view>
				<view class="u-flex-1">
					<u-input v-model="form.password" type="password" placeholder="请输入交易密码" input-align="right"/>
				</view>
			</view>
			<u-button style="margin: 60rpx 50rpx;" type="primary" shape="circle" @click="merchantInfo">确认</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mid: '',
				form: {
					sweet: 0,
					password: '',
					transferType: 1,//1 商户划转到个人 2个人划转到商户
				},
				count: 0,
				customStyle: {
					'max-width': '30%'
				},
				uForm: {}
			}
		},
		onLoad() {
			this.mid = uni.getStorageSync('mid');
			this.getSweet();
		},
		methods: {
			changeDirection() {
				this.form.transferType = this.form.transferType == 1 ? 2 : 1;
			},
			// 获取剩余糖果
			getSweet() {
				this.$u.api.getSweet(this.mid).then(res=>{
					if(res.code == 0){
						this.count = res.data.sweetBalance || 0;
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
			// 糖果账户划转
			merchantInfo() {
				this.form.mid = this.mid;
				this.$u.api.postMerchantInfo(this.form).then(res=>{
					if(res.code == 0){
						uni.showToast({
							icon:'none',
						    title: '糖果划转成功'
						});
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.hui {
		color: #999999;
	}
	.u-font-24 {
		font-size: 24rpx;
	}
	.top-box {
		margin-top: 90rpx;
	}
	.card-box {
		width: 214rpx;
		height: 202rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		border: 2rpx solid #357CD4;
		border-radius: 10rpx;
	}
	.img-card {
		width: 132rpx;
		height: 82rpx;
	}
	.from-content {
		margin-top: 60rpx;
		padding: 0 30rpx;
	}
	.form-item {
		margin-bottom: 27rpx;
		padding: 10rpx 20rpx;
		border: 1rpx solid #E6E6E6;
		border-radius: 4rpx;
	}
	/* .number-input >>>.uni-input-form,
	.number-input >>>.uni-input-wrapper {
		width: 30%;
	} */
	.u-row-reverse {
		flex-flow: row-reverse;
	}
</style>
